<template>
  <el-form-item
    v-if="!item.isHide"
    :prop="item.prop"
    v-bind="{ ...rootConfig.itemConfig, ...item.itemConfig, ...tempItemConfig }"
  >
    <template #label>
      <slot v-if="item.labelSlot" name="labelSlot" :item="item" />
      <span v-else v-tooltip-auto-show>
        <span v-if="item.label">
          {{ rootConfig.isColon ? item.label + rootConfig.labelSuffix : item.label }}
        </span>
        <span v-if="item.labelTip" class="label-tip">{{ item.labelTip }}</span>
        <el-tooltip v-if="item.tooltip" :content="item.tooltip" placement="top">
          <el-icon class="ml4"><Warning /></el-icon>
        </el-tooltip>
      </span>
    </template>
    <!-- 组件前插槽 -->
    <slot name="before" :item="item" />
    <!-- 插槽形式 -->
    <slot ref="ComponentRef" v-if="item.slot" name="componentSlot" :item="item" />
    <!-- 组件 -->
    <component
      v-else
      ref="ComponentRef"
      :is="filterComponent(item.component)"
      v-model="formData[item.prop]"
      :prop="item.prop"
      :form-data="formData"
      :row="formData"
      v-bind="{ validateEvent: false, ...item.bindConfig, ...tempBindConfig }"
      @itemEvent="itemEvent({ prop: item.prop, item, ...($event || {}) })"
    >
      <template #prepend="{ config }">
        <slot name="prepend" :config="config"></slot>
      </template>
      <template #append="{ config }">
        <slot name="append" :config="config"></slot>
      </template>
    </component>
    <!-- 组件后插槽 -->
    <slot name="after" :item="item" />
  </el-form-item>
</template>

<script setup>
import components from '../config';

const emit = defineEmits(['formEvent']);

const ComponentRef = ref();

const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
  tempBindConfig: {
    type: Object,
    default: () => ({}),
  },
  tempItemConfig: {
    type: Object,
    default: () => ({}),
  },
  rootConfig: {
    type: Object,
    default: () => ({}),
  },
  formData: {
    type: Object,
    default: () => ({}),
  },
});

const filterComponent = (val = 'text') => components[val] || val;

function itemEvent(data) {
  emit('formEvent', data);
}

defineExpose({
  ComponentRef,
});
</script>

<style scoped lang="scss">
:deep() .el-form-item__label {
  line-height: normal;
  align-items: center;
}
:deep(.el-form-item__content) {
  line-height: normal;
  height: fit-content;
  word-wrap: break-word;
}
.form_item_span {
  :deep() {
    .el-form-item__label {
      height: 20px;
      line-height: 20px;
      font-weight: 600;
    }
  }
}
.form_label_bold {
  :deep() {
    .el-form-item__label {
      font-weight: 600;
    }
  }
}
</style>
